<template>
  <div class="ProjectDetailInfo">
    <Row>
      <Col span='19'>
      <Row>
        <Col span='24' style="margin-top:50px;margin-left:50px">
        <img src="../assets/WPI_Logo.png" alt="世平集团">
        </Col>
        <Col span='24' style="margin-top:50px;margin-left:50px;">
        <h1 style='font-size:30px'>{{projectData.titleName}}</h1>
        </Col>
        <Col span='5' style="margin-top:20px;margin-left:50px">
        <span style='font-size:15px'>方案 ID: {{projectData.project_id}}</span>
        </Col>
        <Col span='2' style="margin-top:20px;margin-left:10px">
        <span style='font-size:15px'>推荐星数:</span>
        </Col>
        <Col span='15' style="margin-top:14px;margin-left:12px">
        <Rate disabled :value='projectData.recommend' />
        </Col>
        <Col span='22' style="margin-top:30px;margin-left:50px">
        <h3 style='font-size:20px;margin-bottom:10px'>方案简介</h3>
        <span style='font-size:15px'>{{projectData.intro}}</span>
        </Col>
        <Col span='22' style="margin-top:30px;margin-left:50px">
        <h3 style='font-size:20px;margin-bottom:10px'>功能描述</h3>
        <ul style='font-size:15px;margin-left:18px'>
          <li v-for="projectfunction in projectData.function">
            {{projectfunction}}
          </li>
        </ul>
        </Col>
        <Col span='22' style="margin-top:30px;margin-left:50px">
        <h3 style='font-size:20px;margin-bottom:10px'>方案特点</h3>
        <ul style='font-size:15px;margin-left:18px'>

          <li v-for="projectfeature in projectData.feature">
            {{projectfeature}}
          </li>

        </ul>
        </Col>
        <Col span='22' style="margin-top:30px;margin-left:50px">
        <h3 style='font-size:20px;margin-bottom:20px'>产品框图</h3>
        <img :src="projectData.diagram" style="width:900px;height:660px" alt="世平集团">

        </Col>
        <Col span='22' style="margin-top:30px;margin-left:50px;margin-bottom:100px">
        <h3 style='font-size:20px;margin-bottom:20px'>方案图片</h3>
        <Row>
          <template v-for="image in projectData.image">
            <Col span='10'>
            <img :src="image" style="width:300px;height:300px;" alt="方案图片">
            </Col>
          </template>
        </Row>
        </Col>
      </Row>
      </Col>
      <!-- 按钮 -->
      <Row>
        <Col span="1" offset='4' style="margin-top:80px;">
        <Affix :offset-top="10">
          <ButtonGroup :vertical='true' class="buttonGroupSet">
            <Tooltip trigger="hover" content="收藏" placement='left'>
              <Button @click="btnActionCollectOrLike(projectData._id,true)" icon="md-heart-outline" size='large'></Button>
            </Tooltip>
            <Tooltip trigger="hover" content="点赞" placement='left'>
              <Button @click="btnActionCollectOrLike(projectData._id,false)" icon="ios-thumbs-up" size='large'></Button>
            </Tooltip>
            <Tooltip trigger="hover" content="返回上一页" placement='left'>
              <Button icon="md-arrow-back" @click="btnActionBack" size='large'></Button>
            </Tooltip>
          </ButtonGroup>
        </Affix>
        </Col>
      </Row>
    </Row>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        //将路由中的参数赋值给projectid
        projectid: this.$route.params.projectid,

        //API接口
        url: {
          searchProject: this.$Global.url.searchProject,
          userCollect: this.$Global.url.userCollect,
          userLike: this.$Global.url.userLike
        },

        // 存放方案信息
        projectData: {
          diagram: "",
          image: []
        }

        //  //记录历史记录
        //  historys : -1,
      };
    },

    methods: {
      //******************************获取数据***********************/
      /**
       * 根据方案 ID 查找数据
       */
      getProjectData() {
        this.$http
          .get(this.url.searchProject)
          .then(res => {
            if (res.status == 200) {
              this.projectData = res.data;
              //由于是跨域请求,地址在开发者模式下要进行更改
              if (process.env.NODE_ENV === "development") {
                this.projectData.diagram =
                  this.$Global.url.baseUrl + res.data.diagram;
                for (let i = 0; i < res.data.image.length; i++) {
                  this.projectData.image[i] =
                    this.$Global.url.baseUrl + res.data.image[i];
                }
              }
            }
          })
          .catch(error => console.log(error));
      },


      /**********************************点击行为*************************/
      /**
       * 返回上一页的
       */
      btnActionBack() {
        this.$router.go(-1);
      },

      /**
       * 添加收藏(点赞)或取消收藏(点赞))
       * @param {表示对这个id的方案进行收藏或点赞} id
       * @param {为true时,进行收藏操作,为false时,进行点赞操作} bool
       */
      btnActionCollectOrLike(id, bool) {
        var url;
        if (bool === true) {
          url = this.url.userCollect;
        } else {
          url = this.url.userLike;
        }
        this.$http
          .post(url, { _id: id })
          .then(res => {
            if (res.status == 200) {
              let msg = res.data.message;
              this.$Message.success(msg);
              this.getProjectData();
            }
          })
          .catch(error => {
            // this.$Message.error('用户尚未登录');
            console.log(error)
          });
      }
    },

    /**
     * 页面入口
     */
    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.searchProject =
          this.$Global.url.baseUrl +
          this.$Global.url.searchProject +
          "/" +
          this.projectid;
        this.url.userCollect =
          this.$Global.url.baseUrl + this.$Global.url.userCollect;
        this.url.userLike = this.$Global.url.baseUrl + this.$Global.url.userLike;
      }
      this.getProjectData();
    }

  };
</script>


<style>
</style>